<template>
  <div class="preview-article">
    <div class="preview-header">
      <div class="audit-btn-box">
        <button class="preview-btn" @click="handleBack">退出</button>
      </div>
      <div class="preview-btn-box">
        <button class="preview-btn preview-way-btn" :class="{ active: activeWay === 'pc' }" @click="activeWay = 'pc'">pc电脑</button>
        <button class="preview-btn preview-way-btn" :class="{ active: activeWay === 'pad' }" @click="activeWay = 'pad'">平板</button>
        <button class="preview-btn preview-way-btn" :class="{ active: activeWay === 'phone' }" @click="activeWay = 'phone'">手机</button>
      </div>
    </div>
    <!-- 预览模式 -->
    <div class="preview-content">
      <div class="preview-box" :class="{ 'preview-box-pc': activeWay === 'pc', 'preview-box-pad': activeWay === 'pad', 'preview-box-phone': activeWay === 'phone' }">
        <iframe :src="previewUrl" frameborder="no" style="width: 100%; height: 100%"></iframe>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const previewUrl = computed(() => router.currentRoute.value.query.url)
const activeWay = ref('pc')
const handleBack = () => {
  window.close()
}
</script>

<style scoped lang="scss">
.preview-article {
  width: 100vw;
  .preview-header {
    height: 64px;
    background-color: $mainColor;
    display: flex;
    padding: 0 16px;
    justify-content: space-between;
    align-items: center;
    .audit-btn-box,
    .preview-btn-box {
      display: flex;
      width: 235px;
      .preview-btn {
        height: 32px;
        padding: 0 15px;
        line-height: 32px;
        border: 1px solid $white;
        border-radius: 4px;
        background-color: inherit;
        color: $white;
        margin-right: 10px;
        cursor: pointer;
        transition: all 0.3s;
      }
      .preview-btn.preview-way-btn:hover {
        color: $mainColor;
        background-color: $white;
      }
      .preview-btn.preview-way-btn.active {
        color: $mainColor;
        background-color: $white;
      }
      .preview-btn:hover {
        background-color: rgba($white, 0.1);
      }
    }
  }
  .preview-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 64px);
    overflow: hidden;
    background-color: #fff;
    .preview-box {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      transition: all 0.5s;
    }
    .preview-box-pc {
      border: none;
    }
    .preview-box-pad,
    .preview-box-phone {
      width: 66.67%;
      height: 66.67%;
      box-shadow: 0 0 0 2px #d1d5db;
      border: 1px solid rgb(209 213 219);
      border-radius: 6px;
    }
    .preview-box-phone {
      width: 384px;
      height: 800px;
    }
  }
}
</style>
